import { Empty } from "antd";
import React, { memo, useContext, useMemo } from "react";
import { LowCodeContext } from "./Provider";
import { findWithRef } from "../shared";
// import * as Button from "../material/Button";
// import * as Container from "../material/Container";
// import * as LowTable from "../material/LowTable/index";
// import * as LowGrid from "../material/LowGrid";
// import * as LowTabs from "../material/LowTabs";
// import * as PageContainer from "../material/PageContainer";
// const componentMap: any = {
//   Input:{
//     Preview:Input
//   },
//   Button:Button,
//   Container,
//   LowGrid,
//   LowTabs,
//   LowTable,
//   PageContainer,
// };
const rendererExtra = (_props,items) => {
  if (_props) {
    const props = {..._props}
    console.log('propsprops',props)
    Object.keys(props).forEach((key) => {
      if (props[key] && props[key].type) {
        props[key] = (
          <RendererEngine disableDesignerToolbar item={props[key]} />
        );
      }
    });
    if (props.onClick) {
      const onClickText = props.onClick;
      props.onClick = function () {
        // findWithRef()
        new Function('',)
        console.log("onClick", onClickText);
      };
    }
    return props;
  }
  return {}
};
export const RendererEngine = memo(
  ({ levelIndex, disableDesignerToolbar, item }: any) => {
    const { components,items, ComponentWrapper } = useContext(LowCodeContext);
    if (!components[item.type]) {
      return (
        <React.Fragment>
          {ComponentWrapper ? (
            <ComponentWrapper
              key={item._id}
              levelIndex={levelIndex}
              config={item}
            >
              <Empty description={`${item.type || ""}组件没注册`} />
            </ComponentWrapper>
          ) : (
            <Empty />
          )}
        </React.Fragment>
      );
    }
    // if(item.props){
    //   Object.keys(item.props).forEach(key=>{
    //     if(item.props[key].type){
    //       item.props[key] =  <RendererEngine levelIndex={levelIndex+1}
    //       item={item.props[key]}

    //       />
    //     }
    //     //
    //   })
    // }
    const Component = components[item.type].Preview;

    const children = useMemo(() => {
      if (Array.isArray(item.children)) {
        return item.children.map((childConfig, _index) => {
          if (typeof childConfig === "string") {
            return childConfig;
          }
          return (
            <RendererEngine
              levelIndex={levelIndex + 1}
              key={childConfig._id}
              item={childConfig}
              // components={components}
              // ComponentWrapper={ComponentWrapper}
            />
          );
        });
      } else if (typeof item.children !== "undefined") {
        return item.children;
      }
      return null;
    }, [item.children, levelIndex, components, ComponentWrapper]);

    return (
      <React.Fragment>
        {ComponentWrapper ? (
          <ComponentWrapper
            disableDesignerToolbar={disableDesignerToolbar}
            key={item._id}
            levelIndex={levelIndex}
            config={item}
          >
            <Component {...rendererExtra(item.props,items)}>{children}</Component>
          </ComponentWrapper>
        ) : (
          <Component {...rendererExtra(item.props,items)}>{children}</Component>
        )}
      </React.Fragment>
    );
  }
);
const LowCodeRenderer = ({ items }) => {
  // const renderChilren = (dom,config,index)=>{
  //   // if(index>1){
  //   //   return dom
  //   // }
  //   return <div style={{border:'1px solid red',padding:10,margin:10}}>
  //     {config.type}{index}
  //     {dom}</div>
  // }
  // const RendererEngine = ({ levelIndex, item }: any) => {
  //   if (!item || !components[item.type]) {
  //     return null
  //   }
  //   const Component = components[item.type].Preview;
  //   // const childrenNodes: any[] = Array.isArray(config.children)
  //   //   ? config.children
  //   //   : [config.children];
  //   let children = null;
  //   if (Array.isArray(item.children)) {
  //     children = item.children.map((childConfig, _index) => {
  //       if (typeof childConfig === "string") {
  //         return childConfig;
  //       }
  //       return <RendererEngine levelIndex={levelIndex + 1} key={childConfig._id} item={childConfig} />;
  //     });
  //   } else if (typeof item.children) {
  //     children = item.children;
  //   }
  // const dom = <Component {...item.props}>{children}</Component>

  //   return <RendererEngine levelIndex={0} item={items} components={components} ChildrenDecorator={ChildrenDecorator} />;

  // };

  return <RendererEngine levelIndex={0} item={items} />;
};
export default LowCodeRenderer;
